<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div id="app">
       <my-button></my-button>
       <my-button></my-button>
       <my-button></my-button>
       <my-button></my-button>

  </div>
   <hr>

   <div id="app1">
       <my-button></my-button>
       <my-button></my-button>
       <my-button></my-button>
       <my-button></my-button>

   </div>


   <!--    {{msg}}-->
       <script src="js/vue.js"></script>
       <script type="text/javascript">

           //1,创建vue对象
           const app = new Vue({
               el:"#app",// 绑定的dom的id   代表vue实例中的数据只在该dom中有效
               components:{//绑定到具体的vue实例的组件就是局部组件（本地组件），其他vue实例不能使用
                   "myButton":{
                       template:`<div><h1>{{title}}</h1>  <button @click="clickBtn()">点我</button> </div>`,
                       data(){
                           return {
                               title:"hello,我是标题"
                           };
                       },
                       methods:{
                           clickBtn(){
                               alert('hello,局部组件');
                           }
                       }

                      }
               },
               data:{//定义一些数据   项目中：异步请求服务端，服务端获取
                  //msg:'aaa'
               },
               methods:{

               }
           });

           //1,创建vue对象
           const app1 = new Vue({
               el:"#app1",// 绑定的dom的id   代表vue实例中的数据只在该dom中有效
               data:{//定义一些数据   项目中：异步请求服务端，服务端获取
                   //msg:'aaa'
               }
           });
       </script>

</body>
</html>